<template>
  <div class="toast" v-if="isShow">
    <van-toast v-model:show="show" style="padding: 0">
      <template #message>
        <div class="tip-container">
          <div class="tip-icon">
            <span class="tip-length"></span>
            <span class="tip-spot"></span>
          </div>
          <div class="tip-text">{{ props.tipText }}</div>
          <div class="tip-btn" @click="colseTip">
            确认
          </div>
       </div>
      </template>
    </van-toast>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
  tipText: {
    type: String,
    default: '手机号不正确'
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const show = ref(true)
const emit = defineEmits(['colseTip'])
const colseTip = () => {
  emit('colseTip', false)
}
</script>
<script>
export default {
  name: 'TipPopup'
}
</script>

<style lang="less" scoped>
.toast {
  :deep(.van-popup) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-width: none;
    min-height: none;
  }
}
.tip-container {
  width: 360px;
  height: 260px;
  background-color: #fff;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  .tip-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #f8cb86;
    position: relative;
    margin-top: 25px;
    .tip-length {
      position: absolute;
      top: 20px;
      width: 2px;
      height: 60px;
      background-color: #f8cb86;
    }
    .tip-spot {
      position: absolute;
      bottom: 30px;
      width: 3px;
      height: 3px;
      border: 1px;
      border-radius: 50%;
      margin-top: 2px;
      background-color: #f8cb86;
    }
  }
  .tip-btn {
    width: 100%;
    height: 60px;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    line-height: 60px;
    background-color: #20f444;
  }
  .tip-text {
    color: black;
    font-size: 24px;
  }
}
</style>
